 <!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>{$Think.config.site.title} - 数据统计</title>

    <meta name="keywords" content="{$Think.config.site.keywords}">

    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
    <style type="text/css">
	    .seltime{width: 200px; display:inline-block; float: right; margin-right: 20px;}
	    .timebox{display: inline-block; float: right;}
	    .timebox .time{float: left; border:1px solid #e5e6e7; padding: 0 8px}
	    .timebox .time label{ font-size: 14px; font-weight: normal;}
	    .start_time,.end_time{border: none; text-align: center; height: 30px; line-height: 30px; }
	    .timebox button{border-radius: 0 4px 4px 0px ; height: 32px;}
	    .selt{height:32px;}

        .text-r{text-align: right !important;}
        .text-l{text-align: left !important;}
        .text-c{text-align: center !important;}

        tr{border-left: 1px solid #eee; border-top: 1px solid #eee}
        td,th{border-right: 1px solid #eee; border-bottom: 1px solid #eee}
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
          <div class="col-sm-12">
                <div class="float-e-margins">
                    <div class="ibox-title">
                        <div class="row">
                          	<div class="col-sm-12">
                                <div class="input-group pull-right">
                                <form id="fsearch" action="{:url('index')}" method="get" enctype="application/x-www-form-urlencoded">
                                	<div class="timebox">
                                		<div class="time">
                                			<label>开始时间：</label>
                                			<input class="start_time" id="start_time" value="{$w.start_time}" type="text" name="start_time" readonly="true">
                                			<label>结束时间：</label><input type="text" class="end_time" id="end_time" name="end_time" value="{$w.end_time}" readonly="true">
                                		</div>
                                		<button type="submit" class="btn btn-sm btn-primary"> 搜索</button>
                                	</div>
                                	<div class="seltime">
                                    <select class="form-control selt" name="selt">
					                    <option value='0' {eq name="w.selt" value='0'} selected="selected" {/eq}  >快捷操作</option>
					                    <option value='1' {eq name="w.selt" value='1'} selected="selected" {/eq}  >今天</option>
					                    <option value='2' {eq name="w.selt" value='2'} selected="selected" {/eq}  >昨天</option>
					                    <option value='3' {eq name="w.selt" value='3'} selected="selected" {/eq}  >前天</option>
					                    <option value='4' {eq name="w.selt" value='4'} selected="selected" {/eq}  >本周</option>
					                    <option value='5' {eq name="w.selt" value='5'} selected="selected" {/eq}  >上周</option>
					                    <option value='6' {eq name="w.selt" value='6'} selected="selected" {/eq}  >本月</option>
					                    <option value='7' {eq name="w.selt" value='7'} selected="selected" {/eq}  >上月</option>
					                    <option value='8' {eq name="w.selt" value='8'} selected="selected" {/eq}  >最近7天</option>
                                        <option value='10' {eq name="w.selt" value='10'} selected="selected" {/eq}  >最近3天</option>
					                    <option value='9' {eq name="w.selt" value='9'} selected="selected" {/eq}  >最近30天</option>
					                </select>
					                </div>
                                </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="table-responsive">
                            <table class="table table-striped" id="listtable">
                                <thead>
                                    <tr>
                                        <th rowspan="2" class="text-c" >日期</th>
                                        <th colspan="2" class="text-c" >收入（元）</th>
                                        <th colspan="2" class="text-c">支出（元）</th>
                                    </tr>
                                    <tr>
                                        <th class="text-c" >已完成订单</th>
                                        <th class="text-c" >未完成订单</th>
                                        <th class="text-c" >采购</th>
                                        <th class="text-c" >退款</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {volist name="list" id="vo"}
                                    <tr>
                                        <td class="text-c">{$key}</td>
                                        <td class="text-r">￥{:number_format($vo.ent_finish,2)}</td>
                                        <td class="text-r">￥{:number_format($vo.ent_nfinish,2)}</td>
                                        <td class="text-r">￥{:number_format($vo.out_pur,2)}</td>
                                        <td class="text-r">￥{:number_format($vo.out_refund,2)}</td>
                                    </tr>
                                    {/volist}
                                </tbody>
                                <tfoot>
                                    <tr style="border-top: 2px solid #d6c6c6">
                                        <th rowspan="2">统计</th>
                                        <th class="text-r">￥{:number_format($ent_finish_total,2)}</th>
                                        <th class="text-r">￥{:number_format($ent_nfinish_total,2)}</th>
                                        <th class="text-r">￥{:number_format($out_pur_total,2)}</th>
                                        <th class="text-r">￥{:number_format($out_refund_total,2)}</th>
                                    </tr>
                                    <tr>
                                        <th class="text-r" colspan="2">￥{:number_format($ent_finish_total+$ent_nfinish_total,2)}</th>
                                        <th class="text-r" colspan="2">￥{:number_format($out_pur_total+$out_refund_total,2)}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单数金额 -->
            <div class="col-sm-12">
                <div class="float-e-margins">
                    <div class="ibox-content">
                        <div class="row">
                        	<div id="ordermap" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单数金额 -->
  
        </div>
    </div>

    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/peity/jquery.peity.min.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/laydate/laydate.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/getDateRange.js"></script>

    <script type="text/javascript" src="{$Think.config.site.common_resource_url}js/echarts.common.min.js"></script>
	<script type="text/javascript" src="{$Think.config.site.common_resource_url}js/macarons.js"></script>
</body>

</html>
<script>
$(function(){
	$('.selt').change(function(){
        var val=$(this).val();
        var st=$('.start_time');
        var et=$('.end_time');
        switch(parseInt(val))
        {
            case 1:st.val(getCurrentDate);et.val(getCurrentDate);break;
            case 2:st.val(getYesterdayDate);et.val(getYesterdayDate);break;
            case 3:st.val(getpdayDate);et.val(getpdayDate);break;
            case 4:st.val(getWeekStartDate);et.val(getWeekEndDate);break;
            case 5:st.val(getUpWeekStartDate);et.val(getUpWeekEndDate);break;
            case 6:st.val(getMonthStartDate);et.val(getMonthEndDate);break;
            case 7:st.val(getLastMonthStartDate);et.val(getLastMonthEndDate);break;
            case 8:st.val(getSevenStartDate);et.val(getSevenEndDate);break;
            case 9:st.val(getThirtyStartDate);et.val(getThirtyEndDate);break;
            case 9:st.val(getThreeStartDate);et.val(getThreeEndDate);break;
            default: return false;break;
        }
        $('#fsearch').submit();
    });

    var start = {
		elem: '#start_time',
		format: 'YYYY-MM-DD hh:mm',
		// min: laydate.now(), //设定最小日期为当前日期
		max: '2099-06-16 23:59:59', //最大日期
		istime: true,
		istoday: true,
		choose: function(datas){
			$('.selt option:eq(0)').attr('selected','selected');
			// end.min = datas; //开始日选好后，重置结束日的最小日期
			// end.start = datas //将结束日的初始值设定为开始日
		}
	};
	var end = {
		elem: '#end_time',
		format: 'YYYY-MM-DD hh:mm',
		// min: laydate.now(),
		max: '2099-06-16 23:59:59',
		istime: true,
		istoday: true,
		choose: function(datas){
			$('.selt option:eq(0)').attr('selected','selected');
			// start.max = datas; //结束日选好后，重置开始日的最大日期
		}
	};
	laydate.skin('molv'); 
	laydate(start);
	laydate(end);

	//订单数/金额
    var ordermap = echarts.init(document.getElementById('ordermap'),'macarons');
    option_ordermap = {
        title: {
            text: '收入 /  支出',
            subtext: '统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: {$dayMap}
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        legend: {
            data: ['时间', '金额']
        },
        series: [
            {
                name:'收入',
                type:'line',
                data:{$E},
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'支出',
                type:'line',
                data:{$O},
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    ordermap.setOption(option_ordermap);
    //订单数/金额
   
})
</script>